Lyrenhex ⸬ Blog

Firefox vertical tabs instructions

14 February 2024 3 minute read firefox, guide, vertical tabs

These are really some notes for myself for if I ever need to set Firefox up again, but in the interests of sharing, they're public. Why not?

Not much intro to this one! I’ve modified my Firefox a decent bit because:

  • I like containerising specific YouTube pages;
  • I like vertical tabs, a lot.

I was also guiding my brother through setting up a similar environment recently, so figured I’d write it here for posterity (especially since removing the tab bar had me re-Googling how to do it).

Containers

Firefox Multi-Account Containers are great. Use them! Unfortunately, their rules apply only at the domain level. That will be fixed by the next section…

You can set up any domain rules as you wish, etc. Not going into that for this.

Vertical Tabs: Sidebery

  1. Install Sidebery, it’s great.
  2. Configure as you wish. Personal recommendations:
    • Navigation bar layout: horizontal
    • Tabs tree level limit: 2
    • I like having a panel per primary container.
      • And also removing the ability to make adhoc panels, personally.
    • Enable snapshots. No one wants to lose a thousand tabs…
  3. (Optional) Containerise the YouTube Video Player separately to the home page
    • Why? So you can be logged out and using an adblock (and maybe going through a VPN…) when watching videos, but still able to get your subscriptions from the homepage notifications. This step will make it so that /watch pages are reloaded in your Container, and other pages are not.
      • VPN should be managed by your Container settings in MAC.
    1. In your YouTube Isolation container (make it) settings in Sidebery, add the following rules in the same order:
    • Include: https://www.youtube.com/watch
    • Exclude: https://www.youtube.com
  4. Remove the top tab bar because jfc two sets of tabs is a nightmare.
    1. Go to about:config and enable:
    • toolkit.legacyUserProfileCustomizations.stylesheets
    • layers.acceleration.force-enabled
    • gfx.webrender.all
    • gfx.webrender.enabled
    • layout.css.backdrop-filter.enabled
    • svg.context-properties.content.enabled
    1. Go to %APPDATA%/Mozilla/Firefox/Profiles/{PROFILE ID} (it’s probably the folder that ends in .default-release, if that helps)
    2. Create chrome folder if nonexistent.
    3. Create chrome/userChrome.css (if not there already) and add:
      #TabsToolbar,
#sidebar-header,
#sidebar-splitter {
  visibility: collapse;
}
    4. Right click the Firefox UI empty space at the top, and ‘Customize Toolbar’
    5. Enable ‘Title Bar’ in the bottom left.
      • Not doing this will mean the prior CSS will remove your Minimise, Maximise, and Close buttons.
    6. Restart Firefox.
  5. You’re now ready to open a billion tabs and have everything just work.

Tip: If your vertical tabs aren’t visible, use F1 to toggle the sidebar. If you use F11 to go fullscreen, you may also wish to hide the sidebar the same way.